<script setup lang="ts">
  import DisplayRight from '@/components/home/largeScreenDisplay/DisplayRight.vue';
  import DisplayLeft from '@/components/home/largeScreenDisplay/DisplayLeft.vue';
  import DisplayMid from '@/components/home/largeScreenDisplay/DisplayMid.vue';
  import { useRouter } from 'vue-router';
  import { useGo } from '@/hooks/router';
  import AppIcon from '@/components/common/app/AppIcon.vue';
  import { useFullscreen } from '@vueuse/core';
  const { toggle, isFullscreen } = useFullscreen();
  const router = useRouter();
  const go = useGo(router);
  const toggleFullscreen = () => {
    if (router.currentRoute.value.name === 'Home') {
      if (!isFullscreen.value) {
        toggle();
      }
      go({ name: 'DisplayPage' });
    } else {
      if (isFullscreen.value) {
        toggle();
      }
      go({ name: 'Home' });
      setTimeout(() => {
        location.reload();
        // const event = new CustomEvent('resize');
        // document.dispatchEvent(event);
      }, 100);
    }
  };
</script>

<template>
  <div class="min-h-screen relative pb-4 md:pb-0 large-bg">
    <div class="relative">
      <div class="absolute header_box"></div>
      <div
        class="h-[10vh] z-10 font-bold text-xl md:text-3xl text-white text-center flex-justify-items-center tracking-[0.2rem]"
      >
        <h1 class="mb-5 z-10 font-serif">流行疾病监测预警系统</h1>
      </div>
    </div>
    <div class="fullScreen-button" @click="toggleFullscreen">
      <AppIcon v-if="$route.name === 'DisplayPage'" class="p-0" icon="bi:fullscreen-exit" />
      <AppIcon v-else class="p-0" icon="codicon:screen-full" />
    </div>
    <div class="display-container px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-x-4 gap-y-3 md:gap-y-0">
        <DisplayLeft />
        <DisplayMid />
        <DisplayRight />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
  //.display-container {
  //  min-height: 87vh;
  //}
  .header_box {
    display: block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 8vh;
    background: linear-gradient(
        -45deg,
        transparent 50px,
        rgba(255, 255, 255, 0.3) 50px,
        rgba(255, 255, 255, 0.3) 70%,
        transparent 70%
      ),
      linear-gradient(
        45deg,
        transparent 50px,
        rgba(255, 255, 255, 0.3) 50px,
        rgba(255, 255, 255, 0.3) 70%,
        transparent 70%
      );
    @media (max-width: 768px) {
      width: 100%;
    }
  }
  .fullScreen-button {
    position: absolute;
    top: 2%;
    right: 2%;
    font-size: 2.5rem;
    color: white;
    opacity: 0.8;
    cursor: pointer;
    @media (max-width: 768px) {
      font-size: 1.5rem;
      top: 1%;
    }
  }
  .large-bg {
    background-image: url('/src/assets/images/科幻背景1.jpg');
  }
</style>
